import { useEffect, useRef, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import { getUsdtNum, isSuccess, setDefEmployeeId, tifTypes } from '@/utils';
import { orderListApi, userListApi } from '@/api';
import { filterOrder, getYuanGong } from '@/utils/helper';
import { createTimeLie, yuanGongLie } from './ComonOrder';
import dayjs from 'dayjs';

export default function CurrentEntrust() {
  const [yuanGongs, setYuanGongs] = useState<any>([]);
  const [defYuanGongId, setDefYuanGongId] = useState<any>('');
  const tableRef: any = useRef('');

  useEffect(() => {
    initYuanGong();
  }, []);

  // 请求
  async function request(e: any) {
    const _params = {
      ...e,
      status: 'open',
      contract: '',
      userIds: [e.yuanGongId],
    };
    const res: any = await orderListApi(_params);
    if (!isSuccess(res)) return { data: [], total: 0 };
    // 筛选
    const _list = filterOrder(res?.data, _params);
    return { data: _list, total: res?.data?.total, success: true };
  }

  const columns: any[] = [
    {
      title: '合约',
      dataIndex: 'contract',
      hideInSearch: true,
      render: (text: any, record: any) => (
        <div className={`${record?.newSize > 0 ? 'color-red' : 'color-green'}`}>{text}</div>
      ),
    },
    {
      title: 'ID',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text: any) => <>{dayjs(text * 1000).format('YYYY-MM-DD HH:mm:ss')}</>,
    },
    yuanGongLie(yuanGongs, defYuanGongId),
    {
      title: '方向',
      dataIndex: 'size',
      hideInSearch: true,
      render: (text: any, record: any) => (
        <div className={`${record?.newSize > 0 ? 'color-red' : 'color-green'}`}>
          {text > 0 ? '做多' : '做空'}
        </div>
      ),
    },
    {
      title: '价格',
      dataIndex: 'price',
      hideInSearch: true,
    },
    {
      title: '数量(USDT)',
      dataIndex: 'size',
      hideInSearch: true,
      render: (text: any, record: any) => <div>{Math.abs(getUsdtNum(record))}</div>,
    },
    {
      title: '生效方式',
      dataIndex: 'tif',
      hideInSearch: true,
      render: (text: any) => (
        <>
          {tifTypes[text]} <br />({text.toUpperCase()})
        </>
      ),
    },
    {
      title: '冰山委托(USDT)',
      dataIndex: 'iceberg',
      hideInSearch: true,
      render: (text: any, record: any) => <>{text === 0 ? '-' : getUsdtNum(record, text)}</>,
    },
    {
      title: '只减仓',
      dataIndex: 'is_reduce_only',
      render: (text: any) => <>{text ? '是' : '否'}</>,
      hideInSearch: true,
    },
  ];

  // 员工列表
  const initYuanGong = async () => {
    const yuanGongs: any = await getYuanGong(userListApi);
    setYuanGongs(yuanGongs);
    setDefYuanGongId(setDefEmployeeId(yuanGongs));
  };

  return (
    <>
      {yuanGongs && Object.keys(yuanGongs).length > 0 && (
        <ProTable
          rowKey="id"
          columns={columns}
          request={request}
          actionRef={tableRef}
          options={false}
          scroll={{ x: 1200 }}
          pagination={false}
        />
      )}
    </>
  );
}
